<template>
	<view class="theme_bg_vice_color" style="background-color: #f0f0f0;">
		<z-paging ref="paging" v-model="dataList" fixed @query="queryList">
			<view slot="top" class="theme_bg_color">
				<cu-custom id="top" :isBack="true" :backColor="'text-black'">
					<block slot="backText">
						<view class="text-black ">
							我的预约
						</view>
					</block>
				</cu-custom>
				<!-- <view class="padding-top bg-black">

		</view> -->
				<van-tabs swipeable animated color="#aabfd5" sticky :offset-top="top" :active="active"
					@change="onChange"
					@click="onClick"
					>
					<van-tab :title="item1" v-for="(item1,index1) in ['我参加的','我发车的']" :key="index1"></van-tab>
				</van-tabs>
			</view>
			<view class="radius shadow bg-gray padding-lr-xs" style="width: 95%;margin: 20rpx auto 0;">
				<view class="flex justify-between align-center list padding-lr-sm padding-tb-xs margin-top-sm"
					v-for="(item,index) in dataList" :key="index"
					@click="$goPage('../script/AppointmentProgress?id='+item.order.id)">
					<view class="flex justify-start align-center">
						<view class="margin-right-sm">
							<image
								:src="$isHttp(item.xiang.picture)"
								mode=""></image>
						</view>
						<view>
							<view class="text-bold">{{item.xiang.name}}</view>
							<view class="flex text-sm text-grey align-center">
								<text class="text-yellow cuIcon-peoplefill"></text>
								<text class="margin-left-sm">人数：{{item.order.people}}</text>
							</view>
							<view class="flex text-sm text-grey align-center">
								<text class="text-yellow cuIcon-countdownfill"></text>
								<text class="margin-left-sm">时间：{{item.order.date}}【{{item.order.week}}】{{item.order.time}}</text>
							</view>
							<view class="flex text-sm text-grey align-center">
								<text class="text-yellow cuIcon-roundcheckfill"></text>
								<text class="margin-left-sm">难度值：{{item.xiang.difficulty}}</text>
							</view>
							<view class="flex text-sm text-grey align-center">
								<text class="text-yellow cuIcon-locationfill"></text>
								<text class="margin-left-sm">门店：{{item.xiang.storeName}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	export default {
		//注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
		mixins: [ZPagingMixin],
		data() {
			return {
				dataList: [],
				active: 0,
				select:0,
				top: 0,
			};
		},
		methods: {
			onChange(event) {
				this.select=event.detail.index
			},
			onClick(e){
				this.select=e.detail.index
				this.queryList(1,10)
			},
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				this.$u.api.myOrder({
					userId: this.vuex_user.id,
					page: pageNo,
					number: pageSize,
					select: this.select
				}).then(res => {
					this.$refs.paging.complete(res.data);
				})
			},
		},
		onReady() {
			let top = uni.createSelectorQuery().in(this).select("#top"); //nav
			top.boundingClientRect(data1 => {
				this.top = data1.height
			}).exec();
		}

	}
</script>

<style lang="scss" scoped>
	.grrj {
		width: 190rpx;
		height: 295rpx;
		text-align: center;

		image {
			width: 120rpx;
			height: 180rpx;
			border-radius: 10rpx;
		}
	}

	.list {
		// width: 750rpx;
		height: 200rpx;
		background-color: #fff;
		border-radius: 10rpx;

		image {
			width: 140rpx;
			height: 160rpx;
			border-radius: 10rpx;
		}
	}

	.page {
		background-color: #fff;
	}
</style>
